<template>
  <div class="header-container">
    <nav-bar
      :title="'修改密码'"
      :showLeftArrow="true"
      :leftText="'返回'"
      @click-left="back"
    >
    </nav-bar>
  </div>
  <div class="main-container">
    <van-form @submit="save">
      <van-cell-group inset>
        <van-field
          v-model="entity.oldPwd"
          type="password"
          name="原密码"
          label="原密码"
          placeholder="原密码"
          :rules="[{ required: true, message: '请填写原密码' }]"
        />
        <van-field
          v-model="entity.newPwd"
          type="password"
          name="新密码"
          label="新密码"
          placeholder="新密码"
          :rules="[{ required: true, message: '请填写新密码' }]"
        />
        <van-field
          v-model="entity.confirmPwd"
          type="password"
          name="确认密码"
          label="确认密码"
          placeholder="请再次输入密码"
          :rules="[
            { required: true, message: '请填写确认密码' },
            { validator: confirmValidator, message: '两次密码输入不一致' },
          ]"
        />
        <van-field
          center
          clearable
          label="验证码"
          placeholder="输入验证码"
          v-model="entity.verifyCode"
        >
          <template #button>
            <van-image width="100" height="30" :src="verifyCodeUrl" />
          </template>
        </van-field>
      </van-cell-group>

      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          保存
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import NavBar from "@/components/NavBar.vue";
import TabBar from "@/components/TabBar.vue";
import { useRouter } from "vue-router";
import authService from "@/services/auth.service";
import { AxiosError } from "axios";
import { Toast } from "vant";
import memberService from "@/services/member.service";
import UmsMemberChangePasswordParam from "@/entity/UmsMemberChangePasswordParam";

type StateType = {
  verifyCodeUrl: string;
  entity: UmsMemberChangePasswordParam;
};
export default defineComponent({
  components: {
    NavBar,
    TabBar,
  },
  setup() {
    const router = useRouter();
    const state = reactive<StateType>({
      verifyCodeUrl: "",
      entity: new UmsMemberChangePasswordParam(),
    });

    onMounted(() => {
      getVerifyCode();
    });

    const getVerifyCode = () => {
      state.verifyCodeUrl = authService.getVerifyCodeUrl();
    };

    const back = () => {
      router.back();
    };

    const save = async () => {
      try {
        let id = await memberService.changePassword(state.entity);
        Toast.success("保存成功");
        router.push("/login");
      } catch (e) {
        if (e instanceof AxiosError && e.response?.status == 401) {
          Toast.fail("请先登录");
          router.push("/login");
          return;
        }
        Toast.fail("保存失败");
        throw e;
      } finally {
      }
    };

    const confirmValidator = () => {
      return (
        state.entity.newPwd != null &&
        state.entity.newPwd != "" &&
        state.entity.newPwd == state.entity.confirmPwd
      );
    };

    return {
      ...toRefs(state),
      back,
      save,
      confirmValidator,
    };
  },
});
</script>

<style scoped></style>
